<template>
  <div class="order-detail-container">
    <div class="order-info card">

      <div class="content">
        <div class="title">订单信息</div>
        <br>
        <div class="row">
          <span class="label">订单编号：</span>
          <span class="value">{{ orderData.orderId }}</span>
        </div>
        <div class="row">
          <span class="label">创建时间：</span>
          <span class="value">{{ orderData.createdAt }}</span>
        </div>
        <div class="row">
          <span class="label">订单状态：</span>
          <span class="value">
            <el-tag :type="getStatusType(orderData.status)">{{ getStatusText(orderData.status) }}</el-tag>
          </span>
        </div>
      </div>
      <div class="content">
        <div class="title">收货地址</div>
        <br>
        <div class="row">
          <span class="label">收货人：</span>
          <span class="value">{{ orderData.shippingAddress.name }}</span>
          <span class="label phone-label">电话：</span>
          <span class="value">{{ orderData.shippingAddress.phonenumber }}</span>
        </div>
        <div class="row address-row">
          <span class="label">地址：</span>
          <span class="value">
            {{ orderData.shippingAddress.levelOneName }}
            {{ orderData.shippingAddress.levelTwoName }}
            {{ orderData.shippingAddress.levelThreeName }}
            {{ orderData.shippingAddress.levelFourName }}
            {{ orderData.shippingAddress.address }}
          </span>
        </div>
      </div>
      <div class="content">
        <div class="title">商品列表</div>
        <br>
        <el-table :data="orderData.productVo" stripe border>
          <el-table-column prop="imageUrl" label="商品图片" width="120">
            <template slot-scope="scope">
              <img :src="scope.row.imageUrl" alt="商品图片" class="product-image">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称">
            <template slot-scope="scope">
              <div class="product-name">{{ scope.row.name }}</div>
              <div class="product-sku">{{ scope.row.sku }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="单价" width="100">
            <template slot-scope="scope">
              <span>¥{{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" width="80">
            <template slot-scope="scope">
              <span>{{ scope.row.quantity }}</span>
            </template>
          </el-table-column>
          <el-table-column label="小计" width="100">
            <template slot-scope="scope">
              <span>¥{{ scope.row.price * scope.row.quantity }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="content summary-content">
        <div class="summary-item">
          <span class="label">商品总数：</span>
          <span class="value">{{ orderData.totalNumber }}件</span>
        </div>
        <div class="summary-item">
          <span class="label">商品总价：</span>
          <span class="value">¥{{ orderData.totalPrice }}</span>
        </div>
        <div class="summary-item">
          <span class="label">运费：</span>
          <span class="value">¥{{ orderData.shippingFee }}</span>
        </div>
        <div class="summary-item grand-total">
          <span class="label">订单总额：</span>
          <span class="value">¥{{ orderData.totalPrice + orderData.shippingFee }}</span>
        </div>
      </div>
    </div>
    <div class="action-bar" v-if="status !== 1">
      <el-button type="primary" @click="handleConfirmReceipt" v-if="orderData.status === 5 ">确认收货</el-button>
      <el-button type="primary" @click="handlePay" v-if="orderData.status === 1">立即支付</el-button>
      <el-button type="info" @click="handleBack">返回列表</el-button>
    </div>
  </div>
</template>

<script>
import { getRansactionRecords } from '../../../api/list/products'

export default {
  name: 'merchantOrder',
  props: {
    id: {
      type: String ,
      required: true
    },
    status: {
      type: Number ,
      required: false
    }
  },
  data() {
    return {
      orderData: {}
    }
  },
  watch: {
    id(newVal) {
      if (newVal) this.transactionRecords()
    }
  },
  mounted() {
    this.transactionRecords()
  },
  methods: {
    transactionRecords() {
      return getRansactionRecords(this.id)
        .then((response) => {
          this.orderData = response.data
        })
        .catch((error) => {
          this.$message.error('获取商家信息失败')
        })
    },
    getStatusText(status) {
      const statusMap = {
        1: '待支付',
        2: '已支付',
        3: '已发货',
        4: '运输中',
        5: '待收货',
        6: '已完成',
        7: '已取消',
        8: '已退款'
      }
      return statusMap[status] || '未知状态'
    },
    getStatusType(status) {
      const typeMap = {
        1: 'warning',
        2: 'info',
        3: 'primary',
        4: 'primary',
        5: 'success',
        6: 'success',
        7: 'danger',
        8: 'danger'
      }
      return typeMap[status] || 'default'
    },
    handleConfirmReceipt() {
      this.$message.confirm('确定已经收到商品了吗？', '确认收货', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 模拟收货成功
        this.orderData.status = 6
        this.$message({
          type: 'success',
          message: '收货成功！'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    handlePay() {
      this.$message({
        type: 'info',
        message: '跳转到支付页面'
      })
    },
    handleBack() {
      this.$emit('back')
    }
  }
}
</script>

<style scoped>
.order-detail-container {
  padding: 0px;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.title {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  font-weight: 600;
  color: #303133;
}

.content {
  padding: 20px;
}

.row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.label {
  width: 100px;
  color: #606266;
  text-align: right;
  margin-right: 10px;
}

.value {
  color: #303133;
  flex: 1;
}

.phone-label {
  width: 60px;
  margin-left: 30px;
}

.address-row .value {
  line-height: 24px;
}

.product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.product-name {
  font-weight: 500;
  margin-bottom: 4px;
}

.product-sku {
  color: #909399;
  font-size: 12px;
}

.summary-content {
  padding: 20px 40px;
}

.summary-item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
}

.summary-item .label {
  width: 120px;
  text-align: right;
}

.summary-item .value {
  text-align: right;
  flex: none;
  width: 120px;
}

.grand-total {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 600;
}

.grand-total .value {
  color: #f56c6c;
}

.action-bar {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}

.action-bar button {
  margin-left: 10px;
}


</style>
